<!-- 空运投保流程页面 -->
<template>
  <div class="padding" v-loading="loading">
    <el-card >
      <el-form
        :inline="true"
        :model="searchCriteria"
        ref="searchCriteria"
        size="mini"
        class="padding-top-sm flex justify-between"
      >
        <el-row :gutter="6">
          <el-col :span="24">
            <el-form-item prop="waybillNos" label="运单号" size="mini">
              <el-input v-model="searchCriteria.waybillNos" type="textarea" placeholder="多个换行"
                        :autosize="{minRows: 5, maxRows: 5}" :style="{width: '100%'}"></el-input>
            </el-form-item>

            <el-form-item label="出库时间" prop="rangeOutStockDate" size="mini">
              <el-date-picker
                type="daterange"
                v-model="searchCriteria.rangeOutStockDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                clearable
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="保险服务商" size="mini" prop="insureType">
              <el-select v-model="searchCriteria.insureType" filterable>
                <el-option label="华甫达" value="华甫达"></el-option>
                <el-option label="跨境堡" value="跨境堡"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="物流方法" size="mini" prop="shippingWay">
              <el-select v-model="searchCriteria.shippingWay" filterable>
                <el-option label="ZX" value="ZX"></el-option>
                <el-option label="99" value="99"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-button-group>
                <el-button type="primary" size="mini" @click="exportInsureData">导出投保数据</el-button>
              </el-button-group>
              <el-button-group>
                <el-button type="primary" size="mini" @click="exportInsureHpdData">导出并投保华甫达</el-button>
              </el-button-group>
              <el-button-group>
                <el-button type="primary" size="mini" @click="exportInsureKjbData">导出并投保跨境堡</el-button>
              </el-button-group>
              <el-button-group>
                <el-button type="primary" size="mini" @click="initInsureHistoryList">历史投保数据</el-button>
              </el-button-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div model="result_id" v-if="showBoxResult">
      <el-card class="margin-top">
        <el-col :span="17">
          <el-card shadow="never" class="table-container">
            <div class="flex justify-between">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count"
              />
            </div>
          </el-card>
          <el-card shadow="never" class="table-container">
            <el-table
              :data="insureHistoryList"
              class=".el-table__body-wrapper"
              height="500"
              size="mini"
              ref="multipleTable"
              border
            >
              <el-table-column
                type="selection"
                :reserve-selection="true"
              ></el-table-column>
              <ex-table-column
                property="fileName"
                width="250"
                label="历史投保记录"
                :auto-fit="true"
                :fit-header="true"
                show-overflow-tooltip
              />
              <ex-table-column
                :auto-fit="true"
                :fit-header="true"
                property="cdate"
                label="创建时间"
                show-overflow-tooltip
              />
              <el-table-column property="cuser" label="创建人" >
                <template slot-scope="scope">
                  {{cuserMap[scope.row.cuser]}}
                </template>
              </el-table-column>

              <el-table-column label="操作" >
                <template slot-scope="scope">
                  <i
                    class="el-icon-download text-red text-lg pointer"
                    @click="downloadFile(scope.row.fileName)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col
          :span="7"
          shadow="never"
          class="table-container padding-left"
        >
          <el-card shadow="never" class="table-container">
            <div>
              <span class="title-icon">取消投保</span>
              <el-button
                size="mini"
                type="primary"
                style="float: right;margin-bottom: 10px"
                @click="cancelInsure(this)"
              >取消投保</el-button
              >
            </div>
          </el-card>
          <el-card shadow="never" class="table-container">
            <el-col :span="10">
              <div style="margin-bottom: 10px">
                <span>运单号 :</span>
              </div>
              <el-input
                type="textarea"
                :rows="15"
                placeholder="运单号,多个运单(最多2000个)请用换行隔开,修改结果会显示在右边"
                v-model="waybillNos"
              >
              </el-input>
              <div class="margin-tb">
              </div>
            </el-col>
            <el-col :span="14" class="padding-left-xl">
              <span>{{cancelResult}}</span>
            </el-col>
          </el-card>
        </el-col>
      </el-card>
    </div>
  </div>
</template>

<script>
  import { ajax } from "@/store/yg/common/utils";
  import { m } from "@/store/yg/common/local";
  import * as constant from "@/store/yg/common/constant";


  export default {
    data() {
      return {
        loading: false,
        isShow: true,
        showBoxResult: false,
        count: 0,
        pageSize: 20,
        pageIndex: 1,
        cuserMap: {},
        insureHistoryList: [],
        waybillNos: '',
        cancelResult: '',
        searchCriteria: {
          waybillNos: '',
          rangeOutStockDate: [],
          insureType: '',
          shippingWay: '',
        },
      };
    },
    mounted() {
    },
    methods: {
      exportInsureData(){
        if (!this.searchCriteria.waybillNos&&!this.searchCriteria.rangeOutStockDate){
          this.$message.error("运单号或出库时间二选一必填");
          return;
        }
        this.loading =true;
        ajax("exportInsureData", this.searchCriteria).then(
          res => {
            this.loading = false;
            if (res.path) {
              var fileName = res.path;
              if (fileName) {
                window.open(constant.FILE_SERVER + fileName);
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "导出失败"
                });
              }
            } else {
              this.$notify.error({
                title: "错误",
                message: res.errorMesage
              });
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      exportInsureHpdData(){
        if (!this.searchCriteria.waybillNos&&!this.searchCriteria.rangeOutStockDate){
          this.$message.error("运单号或出库时间二选一必填");
          return;
        }
        this.loading =true;
        ajax("exportInsureHpdData", this.searchCriteria).then(
          res => {
            this.loading = false;
            if (res.path) {
              var fileName = res.path;
              if (fileName) {
                window.open(constant.FILE_SERVER + fileName);
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "导出失败"
                });
              }
            } else {
              this.$notify.error({
                title: "错误",
                message: res.errorMesage
              });
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      exportInsureKjbData(){
        if (!this.searchCriteria.waybillNos&&!this.searchCriteria.rangeOutStockDate){
          this.$message.error("运单号或出库时间二选一必填");
          return;
        }
        this.loading = true;
        ajax("exportInsureKjbData", this.searchCriteria).then(
          res => {
            this.loading = false;
            if (res.path) {
              var fileName = res.path;
              if (fileName) {
                window.open(constant.FILE_SERVER + fileName);
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "导出失败"
                });
              }
            } else {
              this.$notify.error({
                title: "错误",
                message: res.errorMesage
              });
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      initInsureHistoryList(){
        this.showBoxResult = true;
        ajax("initInsureHistoryList", {"pageSize":this.pageSize,"currentPage":this.pageIndex})
          .then(res => {
            if (res.code == 200) {
              this.cuserMap = res.data2;
              this.insureHistoryList = res.data;
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      cancelInsure(){
        if(!this.waybillNos){
          this.$message.error("请输入运单数据")
          return;
        }
        ajax("cancelWaybillInsure", {"waybillNos":this.waybillNos})
          .then(res => {
            if (res.code == 200) {
              this.cancelResult = res.data;
              this.$message.success("取消成功")
            } else {
              this.$message.error("取消失败")
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`页数: ${val}`);
        this.initInsureHistoryList();
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        console.log(`当前页: ${val}`);
        this.initInsureHistoryList();
      },
      downloadFile(fileName){
        window.open(constant.FILE_SERVER +"/tmp/"+ fileName);
      }
    }
  };
</script>
<style scoped>
  /deep/ .table-box.el-table thead.is-group th {
    padding: 2px 0;
    background-color: white;
    text-align: center;
  }
  /deep/ .cell {
    width: 100%;
  }
</style>
